<template>
    <el-dialog title="添加试卷" :visible="dialogVisible" @close="handleClose()" width="80%">
      <div style="height:600px;" class="scrollbar">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form :model="quForm" ref="form2">
                <el-form-item label="卷名" :label-width="formLabelWidth">
                  <el-input v-model="paper.paperName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="题库" :label-width="formLabelWidth">
                  <el-select placeholder="请选择题库" v-model="paper.quBankId" @change="getQuesitonByid(paper.quBankId)">
                    <el-option v-for="item in quBank" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="试题总数" :label-width="formLabelWidth">
                  <el-input v-model="paper.questionNum" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="试题总分" :label-width="formLabelWidth">
                  <el-input v-model="paper.paperScore" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="及格分" :label-width="formLabelWidth">
                  <el-input v-model="paper.passMark" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="试卷总时长(分)" :label-width="formLabelWidth">
                  <el-input v-model="paper.examTotalSecond" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="试卷备注" :label-width="formLabelWidth">
                  <el-input v-model="paper.paperMark" autocomplete="off" type="textarea"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="18">
              <el-table :data="tableData" border @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="content" label="题目"> </el-table-column>
                <el-table-column prop="quBank.quBankName" label="所属题库">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="savePaper()">确 定</el-button>
          </div>
      </div>
  
    </el-dialog>
  </template>
    
  <script>
  import { queryBankAll } from '@/api/common/index'
  import { savePaper } from "@/api/onlineQuestion/index.js";
  import { queryQuAll } from "@/api/question/index.js";
  export default {
    props: {
      childDialog: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        tableData: [],
        quForm: {},
        quTypes: [],
        quLevel: [],
        selType: 0,
        value: "",
        paper: {
          questionNum: "",
          paperName: "",
          questionNum: 0,
          examTotalSecond: 0,
          passMark: 0,
          paperMark: "",
          quBankId: "全部",
          quIds: [],
          paperScore:100
        },
        quBank: [],
        formLabelWidth: "120px",
        dialogVisible: false,
      };
    },
    mounted() { },
    methods: {
      //新增试卷
      savePaper() {
        savePaper(JSON.stringify(this.paper)).then((res) => {
          if (res.code == 200) {
            //关闭表单
            this.handleClose();
            //刷新父页面
            this.$parent.queryPaperAll()
          }
        }).catch(res => {
          this.$message({
            type: "info",
            message: "保存失败",
          });
        });
      },
      //显示弹窗
      show() {
        this.dialogVisible = true;
        //获取题库数据
        this.queryQuBankSel();
      },
      //关闭弹窗
      handleClose() {
        this.dialogVisible = false;
        this.clearFrom();
      },
      //清空表单
      clearFrom() {
        this.paper.quBankId = 1;
        this.quBank = [];
      },
      //获取题库下拉框
      queryQuBankSel() {
        queryBankAll(JSON.stringify({})).then(res => {
          for (let s of res.data) {
            this.quBank.push({
              value: s.quBankId,
              label:s.quBankName,
            });
          }
        }).catch((e) => {
          console.log(e);
        });
      },
      //获取题库试题
      queryQuestion(quBankId) {
        let params = {};
        params.current = 1;
        params.size = 10;
        params.quBankId = quBankId;
        queryQuAll(params).then(res=>{
            this.tableData = res.data.records;
        })
      },
  
      //下拉框选择事件
      getQuesitonByid(quBankId) {
        this.paper.quBankId = quBankId;
  
        this.paper.examTotalSecond = 0;
        //刷新题库题目
        this.queryQuestion(quBankId);
      },
      //checkBox事件
      handleSelectionChange(row) {
        for (let item in row) {
          console.log(row[item].quId)
          if (this.paper.quIds.indexOf(row[item].quId) == -1) {
            this.paper.quIds.push(row[item].quId);
            console.log(this.paper.quIds);
          }
        }
        this.paper.questionNum = row.length;
      },
    },
  };
  </script>
  <style scoped></style>